<template>
  <div id="NewAlbum">
    <!--  热门新碟  -->
    <h1>热门新碟</h1>
    <div class="album">
      <div v-for="album in hotAblum" :key="album.id">
        <Record :album="album" :size="130"></Record>
      </div>
    </div>

    <!--  全部新碟  -->
    <h1>
      全部新碟
      <ul>
        <li @click="area = 'ALL'">全部</li>
        <li @click="area = 'ZH'">华语</li>
        <li @click="area = 'EA'">欧美</li>
        <li @click="area = 'KR'">韩国</li>
        <li @click="area = 'JP'">日本</li>
      </ul>
    </h1>
    <div class="album">
      <div v-for="album in allAlbum" :key="album.id">
        <Record :album="album" :size="130"></Record>
      </div>
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="pageNo"
      :page-size="limit"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "NewAlbum",
  data() {
    return {
      hotAblum: [],
      limit: 35,
      pageNo: 1,
      area: "ALL",
      total: 0,
      allAlbum: [],
    };
  },
  mounted() {
    this.getHotAlbum();
    this.getAllAlbum();
  },
  methods: {
    async getHotAlbum() {
      let result = await this.$API.albumNewest({});
      if (result.data.code === 200) {
        this.hotAblum = result.data.albums.splice(0, 10);
      }
    },
    async getAllAlbum() {
      const { limit, pageNo, area } = this;
      let offset = (pageNo - 1) * limit;
      let result = await this.$API.allAlbum({ limit, offset, area });
      if (result.data.code === 200) {
        this.allAlbum = result.data.albums;
        this.total = result.data.total;
      }
    },
    handleCurrentChange(curPage) {
      this.pageNo = curPage;
      this.getAllAlbum();
    },
  },
  watch: {
    area(newVal, oldVal) {
      if (oldVal !== newVal) {
        this.getAllAlbum();
      }
    },
  },
};
</script>

<style scoped lang='less'>
#NewAlbum {
  width: 1020px;
  background-color: #ffffff;
  color: #333333;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid #cdcdcd;

  .album {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    div {
      flex: 20%;
      margin: 10px 0;
    }
  }

  h1 {
    font-size: 24px;
    border-bottom: #c20c0c 2px solid;
    margin: 10px 0;
    padding: 10px 0;
    display: flex;

    ul {
      display: flex;
      font-size: 12px;
      align-items: center;
      color: #666666;

      li {
        padding: 0 12px;
        border-right: 1px solid #666666;
        cursor: pointer;
      }
    }
  }
}

.el-pagination {
  text-align: center;
}
</style>